﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Layout.aspx.cs" Inherits="Layout" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link href="../Style/LessonsStyle.css" rel="stylesheet" type="text/css" />
    Съдържание:
    <ul>
        <li>Основи на Layout</li>
        <li>Panels</li>
        <li>Layout properies</li>
        <li>ScrollViewer</li>
        <li>Custom Layout</li>
    </ul>
    <div>
        <p>
            Основи на Layout
        </p>
        <p>
            <span>WPF предоставя набор от панели чиито цел е да се подредят елемтинте които се съдържат
                в тях. Всеки индивидуален панел предлага различен механизъм за оформление. Оформлението
                на обектите може да е по номер или друг критерий. Гъвкавия начин за комбиниране
                на съдържащите компоненти прави изключително мощна системата.<br />
                Основните типове панели са: StackPanel WarpPanel DockPanel Grid Canvas. Единственият
                видим ефект е размера и позицията на децата му.</span>
        </p>
    </div>
    <div>
        <p>
            Panels</p>
        <p>
            <ul>
                <li>StackPanel - подрежда децата в редове или колони. При стандартни настрйки StackPanel
                    контлата дава на всички деца ширината която той има. Хоризонталния StackPanel прави
                    всички деца които са в него с еднаква височина. Чрез HorizontalAligment пропърти
                    можем да редотвратим това поведение
                    <table border="1">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="Code">
                                        &lt;Window x:Class=&quot;StackPanel.StackPanelWindow&quot;<br />
                                        xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;<br />
                                        xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;<br />
                                        Title=&quot;StackPanel Demo&quot; Height=&quot;300&quot; Width=&quot;300&quot;&gt;<br />
                                        &lt;StackPanel Background=&quot;Bisque&quot;&gt;<br />
                                        &lt;TextBlock Margin=&quot;3&quot;&gt;Look for:&lt;/TextBlock&gt;<br />
                                        &lt;ComboBox Margin=&quot;3&quot;/&gt;<br />
                                        &lt;TextBlock Margin=&quot;3&quot;&gt;Filtered by:&lt;/TextBlock&gt;<br />
                                        &lt;ComboBox Margin=&quot;3&quot;/&gt;<br />
                                        &lt;Button Margin=&quot;3,5&quot;&gt;Search&lt;/Button&gt;<br />
                                        &lt;CheckBox Margin=&quot;3&quot;&gt;Search in titles only&lt;/CheckBox&gt;<br />
                                        &lt;CheckBox Margin=&quot;3&quot;&gt;Match related words&lt;/CheckBox&gt;<br />
                                        &lt;CheckBox Margin=&quot;3&quot;&gt;Search in previous results&lt;/CheckBox&gt;<br />
                                        &lt;CheckBox Margin=&quot;3&quot;&gt;Highlight search hits (in topics)&lt;/CheckBox&gt;<br />
                                        &lt;/StackPanel&gt;<br />
                                        &lt;/Window&gt;<br />
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </li>
                <li>WarpPanel - слага децата в ред с ориентация от ляво на дясно се напълни мястото.
                    WarpPanel също редлага ориентация чрез Orientation пропърти. и започва на следващият
                    ред.
                    <table border="1">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="Code">
                                        &lt;Window x:Class=&quot;WrapPanel.WrapPanelWindow&quot;<br />
                                        xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;<br />
                                        xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;<br />
                                        Title=&quot;WrapPanel Demo&quot; Height=&quot;300&quot; Width=&quot;300&quot;&gt;<br />
                                        &lt;WrapPanel Background=&quot;Aqua&quot; Orientation=&quot;Vertical&quot;&gt;<br />
                                        &lt;Button Width=&quot;30&quot; Height=&quot;60&quot; Background=&quot;Blue&quot;&gt;1&lt;/Button&gt;<br />
                                        &lt;Button Width=&quot;30&quot; Height=&quot;60&quot; Background=&quot;Yellow&quot;&gt;2&lt;/Button&gt;<br />
                                        &lt;Button Width=&quot;30&quot; Height=&quot;60&quot; Background=&quot;Red&quot;&gt;3&lt;/Button&gt;<br />
                                        &lt;Button Width=&quot;30&quot; Height=&quot;60&quot; Background=&quot;Beige&quot;&gt;4&lt;/Button&gt;<br />
                                        &lt;Button Width=&quot;30&quot; Height=&quot;60&quot; Background=&quot;Gold&quot;&gt;5&lt;/Button&gt;<br />
                                        &lt;Button Width=&quot;30&quot; Height=&quot;60&quot; Background=&quot;Green&quot;&gt;6&lt;/Button&gt;<br />
                                        &lt;Button Width=&quot;30&quot; Height=&quot;60&quot; Background=&quot;GreenYellow&quot;&gt;7&lt;/Button&gt;<br />
                                        &lt;Button Width=&quot;30&quot; Height=&quot;60&quot; Background=&quot;Gray&quot;&gt;8&lt;/Button&gt;<br />
                                        &lt;/WrapPanel&gt;<br />
                                        &lt;/Window&gt;<br />
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </li>
                <li>DockPanel - подрежда децата така че да попълни панела до края. Децата се долепят
                    едно до друго и по този начин постига прост стек. Последното дете винаги запълва
                    останалото пространство. Също така позволява дефинирането на пропърти attached с
                    коеот може да се прикепи до някои друг елемент. Елементите никога не припокриват
                    DockPanel контолата.
                    <table border="1">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="Code">
                                        &lt;Window x:Class=&quot;DockPanel.DockPanelWindow&quot;<br />
                                        xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;<br />
                                        xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;<br />
                                        Title=&quot;DockPanel Demo&quot; Height=&quot;300&quot; Width=&quot;300&quot;&gt;<br />
                                        &lt;DockPanel&gt;<br />
                                        &lt;Button DockPanel.Dock=&quot;Left&quot; Background=&quot;Red&quot;&gt;Left&lt;/Button&gt;<br />
                                        &lt;Button DockPanel.Dock=&quot;Left&quot; Background=&quot;Beige&quot;&gt;Left
                                        with lots of text&lt;/Button&gt;<br />
                                        &lt;Button DockPanel.Dock=&quot;Left&quot; Background=&quot;Gold&quot;&gt;Left&lt;/Button&gt;<br />
                                        &lt;Button DockPanel.Dock=&quot;Right&quot; Background=&quot;Green&quot;&gt;Right&lt;/Button&gt;<br />
                                        &lt;Button DockPanel.Dock=&quot;Top&quot; Background=&quot;GreenYellow&quot;&gt;Top&lt;/Button&gt;<br />
                                        &lt;Button DockPanel.Dock=&quot;Bottom&quot; Background=&quot;Gray&quot;&gt;Bottom&lt;/Button&gt;<br />
                                        &lt;Button DockPanel.Dock=&quot;Bottom&quot; Background=&quot;Blue&quot;&gt;Bottom&lt;/Button&gt;<br />
                                        &lt;Button&gt;Fill&lt;/Button&gt;<br />
                                        &lt;/DockPanel&gt;<br />
                                        &lt;/Window&gt;<br />
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </li>
                <li>Grid - привежда всики елементи в мрежа която покрива целия панел.Това позволява
                    да се позиционира еди ред от друг.Всеки елемент се поставя в клетка която е сързана
                    с ред или колона. Също така грида има нужда от информация колко колони и редове
                    са необходими
                    <table border="1">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="Code">
                                        &lt;Window x:Class=&quot;Grid.GridWindow&quot;<br />
                                        xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;<br />
                                        xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;<br />
                                        Title=&quot;Grid Demo&quot; Height=&quot;300&quot; Width=&quot;300&quot;&gt;<br />
                                        &lt;Grid Background=&quot;Beige&quot;<br />
                                        ShowGridLines=&quot;True&quot;&gt;<br />
                                        &lt;Grid.ColumnDefinitions&gt;<br />
                                        &lt;ColumnDefinition /&gt;<br />
                                        &lt;ColumnDefinition /&gt;<br />
                                        &lt;/Grid.ColumnDefinitions&gt;<br />
                                        &lt;Grid.RowDefinitions&gt;<br />
                                        &lt;RowDefinition /&gt;<br />
                                        &lt;RowDefinition /&gt;<br />
                                        &lt;RowDefinition /&gt;<br />
                                        &lt;/Grid.RowDefinitions&gt;<br />
                                        &lt;TextBlock Grid.Column=&quot;0&quot; Grid.Row=&quot;0&quot;&gt;Protocol:&lt;/TextBlock&gt;<br />
                                        &lt;TextBlock Grid.Column=&quot;1&quot; Grid.Row=&quot;0&quot;&gt;HyperText Transfer
                                        Protocol&lt;/TextBlock&gt;<br />
                                        &lt;TextBlock Grid.Column=&quot;0&quot; Grid.Row=&quot;1&quot;&gt;Type:&lt;/TextBlock&gt;<br />
                                        &lt;TextBlock Grid.Column=&quot;1&quot; Grid.Row=&quot;1&quot;&gt;HTML Document&lt;/TextBlock&gt;<br />
                                        &lt;TextBlock Grid.Column=&quot;0&quot; Grid.Row=&quot;2&quot;&gt;Connection:&lt;/TextBlock&gt;<br />
                                        &lt;TextBlock Grid.Column=&quot;1&quot; Grid.Row=&quot;2&quot;&gt;Not encrypted&lt;/TextBlock&gt;<br />
                                        &lt;/Grid&gt;<br />
                                        &lt;/Window&gt;<br />
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </li>
                <li>Canvas - това е най- простия панел, позволява прецизно локализиране на елементите
                    и също така лесно поставя не на елементи
                    <table border="1">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="Code">
                                        &lt;Window x:Class=&quot;Canvas.CanvasWindow&quot;<br />
                                        xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;<br />
                                        xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;<br />
                                        Title=&quot;Canvas Demo&quot; Height=&quot;300&quot; Width=&quot;300&quot;&gt;<br />
                                        &lt;Canvas Background=&quot;Yellow&quot;&gt;<br />
                                        &lt;Button Canvas.Bottom=&quot;30&quot; Canvas.Right=&quot;-28&quot; Width=&quot;60&quot;
                                        Height=&quot;50&quot;&gt;(30,-10)&lt;/Button&gt;<br />
                                        &lt;Button Canvas.Left=&quot;10&quot; Canvas.Top=&quot;10&quot;&gt;(10,10)&lt;/Button&gt;<br />
                                        &lt;Button Canvas.Left=&quot;120&quot; Canvas.Top=&quot;30&quot;&gt;(120,30)&lt;/Button&gt;<br />
                                        &lt;Button Canvas.Left=&quot;60&quot; Canvas.Top=&quot;80&quot; Width=&quot;50&quot;
                                        Height=&quot;50&quot;&gt;<br />
                                        (60,80)&lt;/Button&gt;<br />
                                        &lt;Button Canvas.Left=&quot;70&quot; Canvas.Top=&quot;120&quot; Width=&quot;100&quot;
                                        Height=&quot;50&quot;&gt;<br />
                                        (70,120)&lt;/Button&gt;<br />
                                        &lt;/Canvas&gt;<br />
                                        &lt;/Window&gt;<br />
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </li>
            </ul>
        </p>
    </div>
    <div>
        <p>
            Layout properies
        </p>
        <p>
            Основните Layout пропъртита са:
            <ul>
                <li>Width и Height котио контролират ширината и височината на елемента.</li>
                <li>MinWidth MaxWidth MinHeight MaxHeight позволяват да се зададе диапазон в които може
                    да се движат стойностите. </li>
                <li>HorizontalAlignment и VerticalAligment-дава възможност да се определи елемент с
                    допълнително пространство</li>
                <li>Margin-използва се за позициониране на контола спрямо другите елементи</li>
                <li>Padding-определя колко на ляво трябва да бъде съдържанието на контрола и вънпната
                    част</li>
                <li>FlowDirection- как да се пиле текста (от ляво на дясно или обратно)</li>
            </ul>
        </p>
    </div>
    <div>
        <p>
            ScrollViewer
        </p>
        <p>
            <span>Позволява огромно количестви данни да бъдат показвани в scrollabel area. В ScrollViewer
                елементите имат само едно дете. По default ScrollViewer показва само хоризонтален
                скрол бар.
                <table border="1">
                    <tbody>
                        <tr>
                            <td>
                                <div class="Code">
                                    &lt;Window x:Class=&quot;ScrollViewer.ScrollViewerWindow&quot;<br />
                                    xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;<br />
                                    xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;<br />
                                    Title=&quot;ScrollViewer Demo&quot; Height=&quot;300&quot; Width=&quot;300&quot;&gt;<br />
                                    &lt;ScrollViewer HorizontalScrollBarVisibility=&quot;Auto&quot;&gt;<br />
                                    &lt;Ellipse Fill=&quot;Green&quot; Height=&quot;1000&quot; Width=&quot;2000&quot;
                                    /&gt;<br />
                                    &lt;/ScrollViewer&gt;<br />
                                    &lt;/Window&gt;<br />
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </span>
        </p>
    </div>
    <div>
        <p>
            Custom Layout
        </p>
        <p>
            <span>Layout в WPF има възножност да се разширява.За да си имплементирате свой собствен
                панел трябва да преминете през две фази: Measure и Arrange. След това трябва да
                Panel и да имплементирате фазите.</span>
        </p>
    </div>
</asp:Content>
